<template>
    <div class="wiper">
        <Filter title="站点主数据" :items="items" :model="condition" />
        <Table :buttons="buttons" :columns="columns" :data="data" :pagination="condition" />
        <Form ref="formRef" v-model:show="show" :rules="rules" :model="formData" :items="formItems">
        </Form>
    </div>
</template>
<script>
import Filter from "@/components/Filter";
import Table from "@/components/Table";
import Form from "@/components/Form";
import ATree from 'ant-design-vue/es/tree';
import AButton from 'ant-design-vue/es/button';
import ASelect from 'ant-design-vue/es/select';
import ATooltip from 'ant-design-vue/es/tooltip';
import ADivider from 'ant-design-vue/es/divider';
import ATabs from 'ant-design-vue/es/tabs';
import ATabPane from 'ant-design-vue/es/tabs';
import { CheckOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { pager, remove, save, details } from "@/api/site";
import { Dictionary } from "../../utils/Dictionary";
import {
    ColumnProps, RuleProps, FormProps,
    FilterItems, FormItems, FilterCondition
} from "./config";

export default {
    name: 'site',
    data() {
        return {
            items: FilterItems,
            data: [{}],
            treeData: [],
            show: false,
            buttons: [],
            formData: FormProps,
            rules: RuleProps,
            columns: ColumnProps,
            condition: {
              ...FilterCondition,
              onChange: (page, pageSize) => {
                this.condition.current = page;
                this.condition.pageSize = pageSize;
                this.load();
              }
            },
            formItems: FormItems,
            selectedItemId: '',
            carTypes: [],
            containerTypes: [],
            currentNode: {}
        }
    },
    components: {
        Filter,
        Table,
        Form,
        ATree,
        ATooltip,
        CheckOutlined,
        PlusOutlined,
        DeleteOutlined,
        AButton,
        ASelect,
        ADivider,
        ATabs,
        ATabPane
    },
    computed: {
        isDictionary() {
            return this.$store.state.dictionary
        }
    },
    watch: {
        isDictionary(data) {
            // this._containerType(data);
        }
    },
    mounted() {
        this.load();
        this._containerType(this.$store.state.dictionary);
        this._zone(this.$store.state.dictionary);
    },
    methods: {
        /**
         * 加载数据
         */
        load() {
            pager(this.condition).then(res => {
                this.data = res.data.rows;
                this.condition.total = res.data.total;
            })
        },

        /**
         * 添加方法
         */
         add() {
            this.enableLabel();
            this.formData.id = "";
            this.$refs.formRef.resetField();
            this.show = true;
        },

        /**
         * 修改方法
         */
         modify(ids) {
            this.disabledLabel();
            this.show = true;
            details(ids).then(res => {
                if(res.data.locationLock === '1'){
                    res.data.locationLock = true;
                }else{
                    res.data.locationLock = false;
                }
                this.formData = res.data;
            })
        },

        /**
         * 删除方法
         */
         delete(ids) {
            return new Promise((resolve, reject) => {
                remove(ids.join(",")).then(res => {
                    this.load();
                    return resolve(res);
                }).catch(e => {
                    return reject(e);
                })
            })
        },

        /**
         * 提交
         */
         submit() {
            return new Promise((resolve, reject) => {
                save(this.formData).then(res => {
                    this.load();
                    return resolve(res);
                }).catch((e) => {
                    return reject(e);
                })
            })
        },

        /**
         * 重命名
         * @private
         */
        _rename(list, key = "id") {
            return list?.map(item => {
                return { label: item.name, value: item[key], children: this._rename(item.children) }
            });
        },

        /**
         * 查找托盘类型
         * @private
         */
        _containerType(data) {
            const containerTypes = this._rename(data.filter(item => item.code === Dictionary.CONTAINER_TYPE)
                .map(item => item.children)[0], "code");
            this.formItems.filter(item => item.key === 'containerType')[0].data = containerTypes;
            this.containerTypes = containerTypes;
        },
        /**
         * 查找空间/运行区域
         * @param data
         * @private
         */
        _zone(data){
          const zones = this._rename(data.filter(item => item.code === Dictionary.LOCATION_ZONE)
              .map(item => item.children)[0], "code");
          this.formItems.filter(item => item.key === 'zone')[0].data = zones;
        },

        /**
         * 设置站点码不可编辑
         */
        disabledLabel() {
            this.formItems = this.formItems.map(item => {
                if (item.key === 'label') {
                return { ...item, disabled: true };
                }
                return item;
            });
        },

        /**
         * 设置站点码可编辑
         */
         enableLabel() {
            this.formItems = this.formItems.map(item => {
                if (item.key === 'label') {
                return { ...item, disabled: false };
                }
                return item;
            });
        }


    }
}
</script>
<style></style>
